<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <title>Document</title>
    </head>
    <body>
        <div
            style="width: 500px; height: 100%; margin: auto; text-align: center"
        >
            <button
                style="
                    width: 150px;
                    height: 45px;
                    background-color: #fff;
                    border: 1px solid #000;
                    border-radius: 10px;
                "
                onclick="start()"
            >
                开始游戏
            </button>
            <div style="width: 500px; height: 50px; margin-top: 50px">
                <span style="float: left">倒计时:</span
                ><span id="time" style="float: left"></span>
                <span style="float: right" id="Score"></span>
                <span style="float: right">得分:</span>
            </div>

            <div
                style="
                    width: 500px;
                    height: 500px;
                    border: #000 1px solid;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                "
                id="content"
            >
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
                <div class="Box"></div>
            </div>
        </div>
    </body>
    <script>
        //所得分数
        var Score = 0;
        //数组，用来判断是猫还是老鼠
        arr = [1, 2, 1, 2, 1, 2, 1, 3, 1];
        //渲染页面
        function page() {
            var html = "";
            for (i in arr) {
                if (arr[i] == 1) {
                    //1是空
                    html += `<div class="Box" onclick="integral(${i})"></div>`;
                } else if (arr[i] == 2) {
                    //2是老鼠
                    html += `<div class="Box" onclick="integral(${i})"><img src="./imgs/laoshu.png" alt=""></div>`;
                } else if (arr[i] == 3) {
                    //3是猫
                    html += `<div class="Box" onclick="integral(${i})"><img src="./imgs/miao.png" alt=""></div>`;
                }
            }
            $("#content").html(html);
        }
        //防抖
        var right = true;
        num = 1500;
        var set;
        //点击开始
        function start() {
            if (!right) {
                return;
            }
            right = false;
            clearInterval(set);
            time = 60;
            set = setInterval(() => {
                time--;
                arr.sort(() => Math.random() - 0.5);
                page();
                Animation();
                $("img").hide(1000);
                $("#Score").html(Score);
                $("#time").html(time);
                if (time == 0) {
                    clearInterval(set);
                    alert("游戏已结束");
                }
                num -= 50;
                right = true;
                console.log(num);
            }, num);
            console.log(num);
        }
        function Animation() {
            $("img").animate({ width: "120px", height: "120px" });
            $("img").animate({ width: "100px", height: "100px" });
        }

        function integral(index) {
            $("img").hide(1000);
            $(".Box:eq(" + index + ")").html("");
            if (time != 0) {
                var indexs = [];
                var cat = null;
                for (i in arr) {
                    if (arr[i] % 2 == 0) {
                        indexs.push(i);
                    } else if (arr[i] == 3) {
                        cat = i;
                    }
                }
                for (i in indexs) {
                    if (indexs[i] == index) {
                        Score += 1;
                        $("#Score").html(Score);
                    }
                }
                if (index == cat) {
                    Score -= 1;
                    $("#Score").html(Score);
                }
            } else {
                alert("时间结束了");
            }
        }
    </script>

    <style>
        .Box {
            width: 120px;
            height: 120px;
            border: 1px solid #000;
            margin: 10px;
            border-radius: 60px;
            text-align: center;
            line-height: 200px;
        }
        img {
            width: 100px;
            height: 100px;
        }
    </style>
</html>
